<template>
	<div v-if="questions.length !== 0">
		<div v-if="isFinish" :style="{ height: '500px', width: '90vw' }">
			<ECharts ref="chart" :option="options" />
		</div>
		<div v-else>
			<Progress :title="title" :count="count" :current="current" @onLeftClick="current--"></Progress>

			<div class="question">
				<h3>{{ currentTitle }}</h3>
				<ul>
					<li v-for="(v, i) in anwer" :key="i" @click="handleNext(i)"
						:class="{ active: result[typeIndex].awser[current] === i }">{{ arr[i] }}: {{ v }}</li>
				</ul>
			</div>
			<pre>{{ result }}</pre>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex'
import Progress from '@/components/progress/indexView.vue'
import { RootState } from '@/store'
import { computed } from '@vue/reactivity';
const arr = ['A', 'B', 'C']
const store = useStore<RootState>()
const questions = computed(() => store.state.questions)

const result = computed(() => {
	return questions.value.map(v => {
		return {
			title: v.type,
			awser: new Array(v.list.length)
		}
	})
})

// 当前题目类型下标
const typeIndex = ref(0)
// 当前正在做的题目的总个数
const count = computed(() => questions.value[typeIndex.value].list.length)
//  当前正在做的题目标题
const title = computed(() => questions.value[typeIndex.value].type)
// 当前已经完成题目
const current = ref(0)


// 当前正在做的题目
const currentTitle = computed(() => questions.value[typeIndex.value].list[current.value].title)

const anwer = computed(() => questions.value[typeIndex.value].list[current.value].anwer)

const handleNext = (i: number) => {
	result.value[typeIndex.value].awser[current.value] = i

	if (typeIndex.value === questions.value.length - 1 && current.value === count.value - 1) {
		isFinish.value = true
	}
	else if (current.value === count.value - 1) {
		typeIndex.value++
		current.value = 0
	} else {
		current.value++
	}


}
// 
const isFinish = ref(false)
const options = computed(() => {
	return {
		title: {
			text: '能力检查'
		},
		legend: {
			data: ['能力检查线段']
		},
		radar: {
			// shape: 'circle',
			// indicator: [
			// 	{ name: 'Sales', max: 6500 },
			// 	{ name: 'Administration', max: 16000 },
			// 	{ name: 'Information Technology', max: 30000 },
			// 	{ name: 'Customer Support', max: 38000 },
			// 	{ name: 'Development', max: 52000 },
			// 	{ name: 'Marketing', max: 25000 }
			// ],
			indicator: questions.value.map(v => {
				return {
					name: v.type,
					max: v.list.length
				}
			})
		},
		series: [
			{
				name: 'Budget vs spending',
				type: 'radar',
				data: [
					{
						// value: [4200, 3000, 20000, 35000, 50000, 18000],
						value: result.value.map(v => {
							let count = 0
							v.awser.forEach(item => {
								item === 0 && count++
							})
							return count;
						}),
						name: '能力检查线段'
					},
				]
			}
		]
	};
})
onMounted(() => {
	store.dispatch('fetchQuestion')
})
</script>

<style lang="scss" scoped>
.question {
	padding: 20px;

	ul {
		li {
			border: 1px solid skyblue;
			padding: 20px;
			margin: 10px 0;
			border-radius: 10px;

			&.active {
				background-color: tomato;
				color: white;
			}
		}
	}
}
</style>